import React, { useState } from 'react';
import { TextQA } from './TextQA';
import { PestFromImage } from './PestFromImage';
import { PlantIdentify } from './PlantIdentify';
import { Records } from './Records';
import { Layout } from '../components/Layout';

type TabKey = 'text' | 'pest' | 'plant' | 'records';

export const App: React.FC = () => {
  const [active, setActive] = useState<TabKey>('text');

  return (
    <Layout active={active} onChange={setActive}>
      {active === 'text' && <TextQA />}
      {active === 'pest' && <PestFromImage />}
      {active === 'plant' && <PlantIdentify />}
      {active === 'records' && <Records />}
    </Layout>
  );
};

